<template>
  <div class="color-picker">
    <el-popover placement="bottom-start" title="选择风格" :width="200" trigger="click" content="暂无可选风格" popper-class="color-picker-popper-class">
      <template #reference>
        <div class="reference" @click="visible = !visible">
          <slot></slot>
        </div>
      </template>
      <template #default v-if="predefine.length > 0">
        <div class="option__list">
          <div class="option-item__box" v-for="(color, index) in predefine" :key="index" :class="{ select: color == modelValue }" @click.stop="chooseColor(color)">
            <div :style="{ backgroundColor: color }"></div>
          </div>
        </div>
      </template>
    </el-popover>
  </div>
</template>

<script>
export default {
  emits: ["update:modelValue"],
  props: {
    predefine: { type: Array, default: () => [] },
    modelValue: { type: String, default: "" }
  },
  methods: {
    chooseColor(color) {
      this.$emit("update:modelValue", color)
    }
  }
}
</script>

<style lang="scss">
.color-picker {
  height: 100%;
  .reference {
    height: 100%;
  }
}
.el-popover__title{
  font-size: 13px;
}
.color-picker-popper-class {
  font-size: 13px;
  .option__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    .option-item__box {
      width: 20px;
      height: 20px;
      border-radius: 4px;
      cursor: pointer;
      & > div {
        display: flex;
        height: 100%;
        border-radius: 3px;
      }
    }
    .select {
      box-shadow: 0 0 3px 2px var(--el-color-primary);
    }
  }
}
</style>
